<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-01-25 13:41:01
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-05-09 11:13:15
 * @FilePath: \code\cwp-front\pc-collaboration\src\components\atom\select-people-local\index.vue
 * @Description: 传入人员列表，选人
-->
<template>
  <div>
    <a-table
        class="select-people-local"
        :columns="columns"
        :data-source="dataList"
        :row-selection="rowSelection"
        :pagination="false"
        :scroll="{ y: 400 }"
        :rowKey="rowKey">
      <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 10px;width: 200px;"
          class="search-wrapper">
          <a-input
              v-ant-ref="setInputRef"
              :placeholder="`${$i18n('common.search.label')} ${column.title}`"
              :value="selectedKeys[0]"
              @change="(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
              allowClear />
        <a-button
            class="search-btn"
            type="primary"
            icon="search"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
          {{ $i18n('common.search.label') }}
        </a-button>
        <a-button @click="() => handleReset(clearFilters)">
          {{ $i18n('common.button.reset') }}
        </a-button>
      </div>
      <a-icon
          slot="filterIcon"
          slot-scope="filtered"
          type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }" />
      <template slot="customRender" slot-scope="text, record, index, column">
      <span v-if="searchText && searchedColumn === column.dataIndex">
        <template
            v-for="(fragment, i) in text
            .toString()
            .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
          <mark
              v-if="fragment.toLowerCase() === searchText.toLowerCase()"
              :key="i"
              class="highlight"
          >{{ fragment }}</mark
          >
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
        <template v-else>
          {{ text }}
        </template>
      </template>
    </a-table>
  </div>
</template>
<script>
  export default {
    name: 'SelectPeopleLocal',
    props: {
      //人员数据列表
      dataList: {
        type: Array,
        default: () => []
      },
      rowKey: {
        type: String,
        default: 'memberId'
      }
    },
    data() {
      return {
        //选中的人员
        selectedList: [],
        //选中id
        selectedID: [],
        searchText: '',
        searchInput: null,
        searchedColumn: '',
        //列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
        columns: [
          {
            title: this.$i18n('common.member.name'),
            dataIndex: 'memberName',
            key: 'memberName',
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'customRender'
            },
            onFilter: (value, record) =>
              record.memberName.toString().toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
              if (visible) {
                setTimeout(() => {
                  this.searchInput.focus();
                }, 0);
              }
            }
          },
          {
            title: '',
            dataIndex: 'i18n',
            key: 'i18n'
          }
        ],
        //选择功能的配置。
        rowSelection: {
          //选中项发生变化时的回调
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(
              selectedRowKeys,
              selectedRows.map((d) => d.memberName)
            );

            this.selectedList = selectedRows.map((d) => d.memberName);
            this.selectedID = selectedRowKeys;
          }
        }
      };
    },
    mounted() {
      //把上下文传递给父级
      this.$emit('getContext', this);
    },
    methods: {
      handleSearch(selectedKeys, confirm, dataIndex) {
        confirm();
        this.searchText = selectedKeys[0];
        this.searchedColumn = dataIndex;
      },

      handleReset(clearFilters) {
        clearFilters();
        this.searchText = '';
      },
      onFilter: (value, record) => {
        console.log(record.memberName, value);

        return record.memberName.toString().toLowerCase().includes(value.toLowerCase());
      },
      setInputRef(c) {
        this.searchInput = c;
      }
    }
  };
</script>
<style lang="scss" scoped inline>
.search-wrapper {
  padding: 10px;

  .search-btn {
    margin-top: 10px;
    margin-right: 10px;
  }
}
.select-people-local{
  ::v-deep .ant-table-thead > tr > th {
    border-bottom: 1px solid #e8e8e8 !important;
  }
}
</style>
